<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>嗨扑米后台主页</title>
    	
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="icon" href="images/haipumi.ico"/> 
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<!-- 主题有关的样式列表 -->
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/ui-pepper-grinder/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
	
	<!-- jquery 和   easyui  的主要组件-->
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script> 
	<script src="js/echarts-all.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>  

	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.edatagrid.js"></script>

	<script type="text/javascript" src="js/ajaxfileupload.js"></script>
	<script type="text/javascript" src="js/uploadPreview.js"></script>
	
	<script type="text/javascript" src="js/excanvas.js"></script>
	<script type="text/javascript" src="js/jquery.easy-pie-chart.js"></script>
	<script type="text/javascript" src="js/BackServiceInfo.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style1.css" media="screen">
	<link rel="stylesheet" type="text/css" href="css/jquery.easy-pie-chart.css" media="screen">
	
	<style>
	.back_headinfo_logo{
		width:30%;
		height:60px;
		background:url("images/yhj_20150901105929.png") no-repeat;
		background-size:contain;
		position:absolute;
		left:50px;
		top:30px;
		z-index:9;
	}
	.back_headinfo_cominfo{
		width:100%;
		height:100%;
		background:url(images/QQ20151028210840.png);
		position:absolute;
		z-index:8;
	}
	.back_headinfo_userinfo{
		position:absolute;
		right:50px;
		top:5px;	
		width:250px;
		height:110px;
		z-index:9;
	}
	.back_headinfo_userinfo_info{
		position:absolute;
		bottom:60px;	
		font-size:13px;
	}
	.back_headinfo_userinfo_info_logout{
		position:absolute;
		bottom:15px;
		right:120px;
	}
	.back_headinfo_userinfo_info_logout:hover{
		cursor:pointer;
		color:red;
		text-decoration: underline;
	}
	.back_headinfo_userinfo_img{
		border: 1px solid pink;
		border-radius:50px;
		width:100px;
		height:100px;
		position:absolute;
		right:0px;
		background:#FFC1C1;
	}
	
	
	</style>
	<script>
			
		
		
		$(function(){
		    
		    $(".back_headinfo_userinfo_img").mouseover(function(){
		    	$("#back_headinfo_userinfo_img_black").fadeIn("normal");
		    	setTimeout('$("#back_headinfo_userinfo_img_black").fadeOut("normal")',2500);
		    });
		    $(".back_headinfo_userinfo_img").parent().mouseout(function(){
		    	
		    });
		    
		    
		    //因为有两棵树，需要用类样式来添加事件
		    $(".easyui-tree").tree({
		    	onClick:function(node){
		    		if(node.attributes){
		    			//证明有url配置
		    			//打开这个url
		    			//第一次则打开一个新的panel，
		    			//已经打开了一个panel，则显示原来的
		    			openPanel(node.text,node.attributes.url);
		    		}
		    	}
		    });
		    
		    //给center——tabs绑定事件，上下文菜单
		    $("#center_tabs").tabs({
		    	onContextMenu:function(e,title,index){
		    		//取消浏览器的右键菜单
		    		e.preventDefault();
		    		//显示上下文菜单，tabsmenu
		    		$("#tabsmenu").menu("show",{
		    			left:e.pageX,
		    			top:e.pageY
		    		}).data("selectTabTitle",title);//==》在tabsmenu中记录当前点的tab的title
		    	}
		    });
		    $("#tabsmenu").menu({
		    	onClick:function(item){//item就是menu中被点的选项  div
		    		//取出item   的   name
		    		var name=item.name;
		    		closeTab(this,item.name);
		    	}
		    })
		    
		    //给tree绑定上下文菜单，
		    $(".easyui-tree").tree({
		    	onContextMenu: function(e){
		    		e.preventDefault();//清除浏览器自带的右键菜单
		    		
		    		// 显示上下文菜单
		    		$('#tree_menu').menu('show', {
		    			left: e.pageX,
		    			top: e.pageY
		    		});
		    	}
		    });
		    
		});
		
		//具体点的menu的选项的操作
		function closeTab(menu,closeType){
			//取出当前对应的tab的  selectTabTitle
			//alert(menu+","+closeType);
			var selectTabTitle=$(menu).data("selectTabTitle");
			//alert(selectTabTitle);
			//循环整个centertabs，根据selectTabTitle找到要关闭的tab
			var tabs=$("#center_tabs");
			if(closeType=="close"){
				if(selectTabTitle!="服务器信息概览"){
					tabs.tabs("close",selectTabTitle);
					return ;
				}else{
					showinfobox("服务器信息概览页面不能被关闭");
				}
				
			}
			//创建一个数组，用于存要关闭的tab  里面存的是tab 的名字
			var allclosetabs=[];
			//创建一个数组，存所有的tabs   里面存的是tab  对象
			var alltabs=tabs.tabs("tabs");
			//循环center——tabs，判断哪些tab要关，要关的存到数组中
			$.each(alltabs,function(){
				// 先取出每一个tab的options
				var options=$(this).panel("options");
				if(options.closable  &&  options.title!=selectTabTitle  &&  closeType=="closeothers"){//关闭其他的逻辑
					allclosetabs.push(options.title);//将符合条件的tab title 放到allclosetabs数组中，等待一个个循环关闭
				}else if(options.closable  &&  closeType=="closeall"){//关闭所有的逻辑
					allclosetabs.push(options.title);//将符合条件的tab title 放到allclosetabs数组中，等待一个个循环关闭
				}
			});
			//循环数组关闭
			for(var i=0;i<allclosetabs.length;i++){
				tabs.tabs("close",allclosetabs[i]);
			}
			
		}
		
		//要在tabs中打开一个新的tab
		function openPanel(text,url){
			//先判断tab是否已经打开
			if($("#center_tabs").tabs("exists",text)){
				$("#center_tabs").tabs("select",text);
			}else{
				//打开tab
				$("#center_tabs").tabs('add',{
					title:text,
					selected: true,
					closable:true,
					href:url
				});
			}
		};
		
		
		function logout(){
			//alert("asdf");
			$.ajax({
				type:"POST",
				url:"backadmin/admin.action?op=backlogout",
				dataType:"JSON",
				success:function(data){
					if(data.code==1){
						//alert("登出成功");
						setInterval('intervaldelete()',1000);
						setTimeout('location.href=\'BackadminLogin.jsp\'',5000);
					}else{
						showinfobox(2,"","登出失败，请联系管理员处理");
					}
				}
			});
		}
		var timeout=5;
		function intervaldelete(){
			timeout--;
			showinfobox(2,"","登出成功，系统将在"+timeout+"秒后返回到后台登录页面...");
		}
		
		
		
		function showinfobox(flag,image,string){
			if(flag==1){
				if(image!=""){
					
				}
				$("#infomessage").stop(true,true);
				$("#infomessage p").html(string);
				$("#infomessage").slideDown('narmal').delay(3000).slideUp('fast');
			}else if(flag==2){
				if(image!=""){
					
				}
				$("#infomessage2").stop(true,true);
				$("#infomessage2 p").html(string);
				$("#infomessage2").slideDown('narmal').delay(3000).slideUp('fast');
			}
		}
		
		
		function collapseAll(obj){
			var tree=$(obj).parent().next();
			$(".easyui-tree").tree("collapseAll");
		}
		
		function expandAll(obj){
			//alert("展开啦");
			var tree=$(obj).parent().next();
			$(".easyui-tree").tree("expandAll");
		}
		
	</script>
  </head>
  
<body>
    
    
<div id="cc" class="easyui-layout" style="width:100%;height:630px;">
    <div class="back_headinfo" data-options="region:'north',split:true,collapsible:false" style="height:120px;">
    <!-- 头部信息：公司logo    公司口号       登录人信息-->
    	<div class="back_headinfo_logo" >
    		
    	</div>
    	<font style="position:absolute;z-index:9;font-size:18px;color:#fff;top:50px;left:200px;">&copy;right</font>
        <div class="back_headinfo_cominfo">
    		
    	</div>
        <div class="back_headinfo_userinfo">
        	<label class="back_headinfo_userinfo_info" style="color:#fff;font-size:15px;">欢迎您，<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${admin.aname }</label>
        	<label class="back_headinfo_userinfo_info_logout" onClick="logout()" style="color:#fff;">安全登出</label>
    		<div class="back_headinfo_userinfo_img" style="overflow:hidden;">
    			<div id="back_headinfo_userinfo_img_black" style="display:none;width:100px;height:100px;background:rgba(0,0,0,.5);position:absolute;z-index:6;">
    				<h3 style="color:#fff;position:absolute;top:25px;left:20px;">用户信息</h3>
    			</div>
    			<center>
    				<img src="images/yhj_10007.png" width="100" height="100" style="position:relative;z-index:5;"/>
    			</center>
    			
    		</div>
    	</div>
    </div>
   
    <div data-options="region:'east',title:'工具栏',split:true," style="width:200px;">
    	<div id="toolbars" class="easyui-layout" data-options="fit:true">	
    		<div data-options="region:'center',title:'仓鼠'" style="width:100%;height:100px;">
    			<div style="width:100%;height:100%;">
	    		<div style="position:absolute;width:100%;height:10%;left:0px;top:10%;background:#000;filter:alpha(opacity=0);opacity:0"></div>
				<object type="application/x-shockwave-flash" style="outline:none;" data="swf/hamster.swf" width="100%" height="100%"><param name="AllowScriptAccess" value="never"></param><param name="wmode" value="opaque"></param></object>
	    		</div>
    		</div>
    		
    		<div data-options="region:'north',title:'今日'" style="width:100%;height:200px;">
    			<div id="cc" class="easyui-calendar" data-options="fit:true"></div>
    		</div> 
    	</div>
    </div>
	    <div class="mannav" data-options="region:'west',title:'管理导航',split:true" style="width:200px;">
	    	
    	<div id="aa" class="easyui-accordion" style="width:100%;height:100%; border:none;">
    		
            <div title="系统管理" data-options="iconCls:'icon-large-shapes'" style="overflow:auto;padding:10px; background-size:">
	            
                <div class="mannav_item1" style="width:100%;height:100%;padding:0px;">
                	<!--<h3 style="color:#0099FF;">这里显示服务器的状态</h3>-->
                	<div style="padding:3px 5px;">
					    <a href="javascript:expandAll($(this))" class="easyui-linkbutton" icon="icon-add" plain="true">展开所有</a>
					    <a href="javascript:collapseAll($(this))" class="easyui-linkbutton" icon="icon-remove" plain="true">收拢所有</a>
					</div>
                    <ul id="system_tree" class="easyui-tree" data-options="dnd:false,animate:true">
				
				</ul>
                </div>
            </div>
            <div title="内容管理" data-options="iconCls:'icon-gears',selected:true,animate:true,dnd:false" style="padding:10px;">
            
              	<!--  <h3 style="color:#0099FF;">后台管理列表</h3>-->
              	   <!--<ul class="easyui-tree">
					<li>
						<span>My Documents</span>
						<ul>
							<li data-options="state:'closed'">
								<span>Photos</span>
								<ul>
									<li>
										<span>Friend</span>
									</li>
									<li>
										<span>Wife</span>
									</li>
									<li>
										<span>Company</span>
									</li>
								</ul>
							</li>
							<li>
								<span>Program Files</span>
								<ul>
									<li>Intel</li>
									<li>Java</li>
									<li>Microsoft Office</li>
									<li>Games</li>
								</ul>
							</li>
							<li>index.html</li>
							<li>about.html</li>
							<li>welcome.html</li>
						</ul>
					</li>
				</ul>-->
				<div style="padding:3px 5px;">
				    <a href="javascript:expandAll($(this))" class="easyui-linkbutton" icon="icon-add" plain="true">展开所有</a>
				    <a href="javascript:collapseAll($(this))" class="easyui-linkbutton" icon="icon-remove" plain="true">收拢所有</a>
				</div>
				<ul id="content_tree" class="easyui-tree" data-options="dnd:true,animate:true">
				
				</ul>
            </div>
    	</div>
    </div>
    <div class="mainman" data-options="region:'center',title:'管理'" style="background:#eee;border:none;">
   		<!-- 中间的tab -->
   		<!-- <div id="tt" class="easyui-tabs" data-options="fit:'true'" style="">
	        <div title="Tab1" style="padding:20px;display:none;">
	            tab1
	        </div>
	        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
	            tab2
	        </div>
	        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">
	            tab3
	        </div>
    	</div>	
    	<div class="mainman_main" style="width:200px;height:200px;background:#fff;">
    	
    	</div>-->
    	<div id="center_tabs" class="easyui-tabs" data-options="fit:'true'">
			<div title="服务器信息概览" style="padding:10px" data-options="iconCls:'icon-help'">
			
				<!-- easypiecharts  图表 -->
				<body id="easypiecharts" onLoad="initPieChart();">
					<div class="container" id="serviceinfochart">
			            <div class="chart">
			                <div class="percentage" data-percent="50"><span></span>%</div>
			                <div class="label">服务器内存使用率</div>
			            </div>
			            <div class="chart">
			                <div class="percentage" data-percent="50"><span></span>%</div>
			                <div class="label">服务器cpu使用率</div>
			            </div>
			            <div style="width:500px; height:180px;"></div>
			            
			            
			            <!-- <c:forEach items="${sessionScope.ServiceInfo.disklist}" varStatus="i" var="item" > 
							<div class="chart">
				                <div class="percentage" data-percent="50"><span>${item.zhanyonglv}</span>%</div>
				                <div class="label">磁盘${ item.name }占用率</div>
				            </div>
						</c:forEach> -->
						
					</div>
					<div style="width:50%;height:50%;position:absolute;top:80px;right:20px;padding-top:10px;">
						<font color="#999" size="5px">服务器IP：<a id="yhj_ip">${sessionScope.ServiceInfo.ip }</a></font><br/>
						<font color="#999" size="5px">服务器名称：<a id="yhj_computername" ></a></font><br/>
						<font color="#999" size="5px">服务器虚拟机版本号：<a id="yhj_javaversion" ></a></font><br/>
						<font color="#999" size="5px">服务器处理核心数：<a id="yhj_cpunum" ></a></font><br/>
						<font color="#999" size="5px">服务器系统：<a id="yhj_systemname" ></a></font><br/>
						<font color="#999" size="5px">服务器系统版本号：<a id="yhj_systemversion" ></a></font><br/>
						<font color="#999" size="5px">服务器磁盘路径：<a id="yhj_userdocument" ></a></font><br/>
					</div>
				</body>
			
				<img id="fullbutton" src="images/003.png" width="24" onClick="full()" style="position:absolute;right:50px; top:30px;"/>
				<p id="serviceinfo"></p>
				
				
			</div>
		</div>
    </div>
</div>

<!-- 上下文菜单  用在tabs上， -->
<div id="tabsmenu" class="easyui-menu" style="width:120px;">  
    <div name="close">关闭</div>  
    <div name="closeall" >关闭全部</div> 
    <div name="closeothers">关闭其他</div>
</div>  


<!-- 上下文菜单，用在tree上 -->
<div id="tree_menu" class="easyui-menu" style="width:120px;">
	<div onclick="collapseAll()" data-options="iconCls:'icon-add'">展开所有</div>
	<div onclick="expandAll()" data-options="iconCls:'icon-remove'">收拢所有</div>
</div>





<div id="infomessage" style="position:absolute;bottom:0px; right:50px;display:none;">
    <div id="p" class="easyui-panel" title="提示信息" 
            style="width:200px;height:150px;padding:10px;background:#fafafa;"
            data-options="iconCls:'icon-undo',modal:true">
          <br/>
        <p>显示提示信息</p>
    </div>
</div>

<div id="infomessage2" style="position:absolute;top:0px;left:300px;display:none;">
	<div id="p" class="easyui-panel" title="提示信息"   
	        style="width:700px;height:150px;padding:10px;background:#fafafa;"  
	        data-options="iconCls:'icon-save',collapsible:true">  
	    <br/>
	    <p>panel content.</p>   
	</div>  
</div>





<script>

	var initPieChart = function() {
		$('.percentage').easyPieChart({
			animate: 1000
		});
		$('.percentage-light').easyPieChart({
			barColor: function(percent) {
				percent /= 100;
				return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
			},
			trackColor: '#666',
			scaleColor: true,
			lineCap: 'butt',
			lineWidth: 15,
			animate: 1000
		});
	
		$('.updateEasyPieChart').on('click', function(e) {
		  e.preventDefault();
		  $('.percentage, .percentage-light').each(function() {
			var newValue = Math.round(100*Math.random());
			$(this).data('easyPieChart').update(newValue);
			$('span', this).text(newValue);
		  });
		});
	};
	
	
	
	
	$.extend($.fn.layout.methods, {
		full : function (jq) {
			return jq.each(function () {
				var layout = $(this);
				var center = layout.layout('panel', 'center');
				center.panel('maximize');
				center.parent().css('z-index', 10);

				$(window).on('resize.full', function () {
					layout.layout('unFull').layout('resize');
				});
			});
		},
		unFull : function (jq) {
			return jq.each(function () {
				var center = $(this).layout('panel', 'center');
				center.parent().css('z-index', 'inherit');
				center.panel('restore');
				$(window).off('resize.full');
			});
		}
	});
	function full() {
		$(".easyui-layout").layout("full");
		$("#fullbutton").attr("src","images/004.png");
		$("#fullbutton").attr("onClick","unFull()");
	}
	function unFull() {
		$(".easyui-layout").layout("unFull");
		$("#fullbutton").attr("src","images/003.png");
		$("#fullbutton").attr("onClick","full()");
	}

	

	//页面记载完后，显示树的节点数据
	$(function(){
		
		
		//系统管理项的树
		var treeData1=[
			{
				text:"管理人员",
				state:"closed",
				children:[
					{
						text:"注册用户列表",
						attributes:{url:"backadmin/SystemManagement/haipumi_user/Haipumi_user.jsp"}
					},
					{
						text:"管理员列表",
						attributes:{url:"backadmin/SystemManagement/haipumi_admins/Haipumi_admins.jsp"}
					}
				]
			},
			{
				text:"数据库",
				state:"closed",
				children:[
							{
								text:"数据库管理",
								attributes:{url:"backadmin/SystemManagement/databaseMan/DataBaseMan.jsp"}
							}
						]
			},
			
			{
				text:"文件管理",
				state:"closed",
				children:[
					{
						text:"文件备份",
						attributes:{url:"backadmin/ContentManagement/siglePage/SiglePage.jsp"}
					}
				]
			},
			{
				text:"登录用户管理",
				state:"closed",
				children:[
					{
						text:"修改用户信息与密码",
						attributes:{url:"backadmin/ContentManagement/siglePage/SiglePage.jsp"}
					}
				]
			},
			{
				text:"统计",
				state:"closed",
				children:[
					{
						text:"首页浏览次数",
						attributes:{url:"backadmin/SystemManagement/statistical/IndexViewsTotal.jsp"}
					},
					{
						text:"IP浏览次数",
						attributes:{url:"backadmin/SystemManagement/statistical/IPViewsTotal.jsp"}
					}
				]
			}
		               
		];
		var treeData2=[
	   			{
	   				text:"内容管理",
	   				state:"closed",
	   				children:[
	   					{
	   						text:"任务管理",
	   						children:[
	   						    {
	   						    	text:"任务列表",
	   								attributes:{url:"backadmin/ContentManagement/haipumi_task/Haipumi_task.jsp"}
	   							},
	   							{
	   						    	text:"任务类别管理",
	   								attributes:{url:"backadmin/ContentManagement/haipumi_taskType/TaskType.jsp"}
	   							},
	   							{
	   						    	text:"任务评论管理",
	   								attributes:{url:"backadmin/ContentManagement/haipumi_reply/Haipumi_reply.jsp"}
	   							}
	   						]
	   					},
	   					{
	   						text:"皮肤管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_skin/Haipumi_skin.jsp"}
	   					},
	   					{
	   						text:"活动管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_activity/Haipumi_activity.jsp"}
	   					},
	   					{
	   						text:"聊天信息管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_chatInfo/Haipumi_chatInfo.jsp"}
	   					},
	   					{
	   						text:"帮助信息管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_helpInfo/Haipumi_helpInfo.jsp"}
	   					},
	   					{
	   						text:"兑换商品管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_product/Goods.jsp"}
	   					},
	   					{
	   						text:"兑换管理",
	   						attributes:{url:"backadmin/ContentManagement/haipumi_exchangelist/Haipumi_exchangelist.jsp"}
	   					}
	   				]
	   			},
	   			{
	   				text:"链接管理",
	   				state:"closed",
	   				children:[
	   					{
	   						text:"友情链接",
	   						attributes:{url:"backadmin/ContentManagement/friendlyLink/FriendlyLink.jsp"}
	   					},
	   					{
	   						text:"商家链接",
	   						attributes:{url:"backadmin/ContentManagement/merchantLink/MerchantLink.jsp"}
	   					}
	   				]
	   			},
	   			{
	   				text:"单页管理",
	   				state:"closed",
	   				children:[
	   					{
	   						text:"单页列表",
	   						attributes:{url:"backadmin/ContentManagement/siglePage/SiglePage.jsp"}
	   					}
	   				]
	   			}		
	   		];
		
		$("#system_tree").tree({
			data:treeData1,
		});
		$("#content_tree").tree({
			data:treeData2,
		});
	});
	
</script>
</body>
</html>
